<template>
	<view>
		<navBar title="认证"></navBar>
		<view class="Wrapper">
			<view class="list">
				<text class="title">姓名：</text>
				<input type="text" class="Input" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="list">
				<text class="title">身份证号：</text>
				<input
					type="text"
					class="Input"
					v-model="cardNo"
					maxlength="18"
					placeholder="请输入身份证号" />
			</view>
			<view class="list">
				<text class="title">手机号：</text>
				<input
					type="number"
					class="Input"
					v-model="mobileNumber"
					maxlength="11"
					placeholder="请输入手机号" />
			</view>

			<view class="list">
				<text class="title">银行卡号：</text>
				<input
					type="number"
					class="Input"
					v-model="bankCardNo"
					placeholder="请输入银行卡号" />
			</view>

			<view class="Btns" @click="Config">确定</view>
		</view>
	</view>
</template>

<script setup>
	import {
		toUrl,
		toLogin,
		Toast,
		formatter,
		tampToDate,
		staticImg,
		imgUrls,
		showLoading,
		hideLoading,
		toRect,
		toPage,
		getFileExtension,
		previewFile,
	} from '@/utils/utils.js';
	import { ref, computed, watch } from 'vue';
	import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import Http from '@/utils/request.js';
	import { useMainStore } from '@/stores/index';

	const mainStore = useMainStore();
	const name = ref(''); // 姓名
	const cardNo = ref(''); // 身份证号
	const mobileNumber = ref(''); // 手机号
	const bankCardNo = ref(''); // 银行卡号

	const Config = () => {
		const regex = /^1[3-9]\d{9}$/;
		if (!name.value) return Toast('请输入姓名');
		if (!cardNo.value) return Toast('请输入身份证号');
		if (cardNo.value && cardNo.value.length != 18) return Toast('身份证号输入有误');
		if (!mobileNumber.value) return Toast('请输入手机号');
		if (mobileNumber.value && !regex.test(mobileNumber.value)) return Toast('手机号码输入有误');
		if (!bankCardNo.value) return Toast('请输入银行卡号');
		showLoading('');
		Http.post({
			url: '/api/tripartite/msca/personal',
			data: {
				name: name.value,
				cardNo: cardNo.value,
				mobileNumber: mobileNumber.value,
				bankCardNo: bankCardNo.value,
			},
		}).then((res) => {
			hideLoading();

			if (res.code != 0) return Toast(res.msg);
			const result = JSON.parse(res.data);
			mainStore.h5AuthUrl = result.resBody.h5AuthUrl;
			toRect(`webView?Type=1`);
		});
	};
</script>

<style lang="scss">
	page {
		background-color: $page;
	}
</style>
<style lang="scss" scoped>
	.Wrapper {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		.list {
			display: flex;
			flex-direction: column;
			margin-top: 24rpx;
			.title {
				color: #000;
				font-size: 32rpx;
			}
			.Input {
				width: 100%;
				height: 80rpx;
				padding: 0 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-top: 20rpx;
				font-size: 28rpx;
			}
		}
		.Btns {
			width: 100%;
			height: 80rpx;
			background-color: $color_008;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
			border-radius: 10rpx;
			margin-top: 100rpx;
		}
	}
</style>
